<template>
    <div class="attribute-attr">
        <el-tooltip effect="dark" placement="right" v-if="base.validateBox(currentElementList[0]).length">
            <div slot="content" v-html="getValidataBoxLabel(base.validateBox(currentElementList[0]))"></div>
            <i class="el-icon-warning validata-warning"></i>
        </el-tooltip>
        <div class="attribute-position main-panel-wrap">
            <div class="basic-props-item position-l">
                <div class="main-text-tran-50">左边距</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_x.svg" />
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getLeftValueName()" type="number" class="mas-basis-input mas-input-top" @input="base.setLeftValue(currentElementList[0], canvas.width, JQuery('#' + base.getLeftValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="line.setElement(currentElementList[0]); history.addHistory(store.clone(), 3)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="base.getLeftUnitName()" class="main-mas-basis-select" @change="base.setLeftUnit(currentElementList[0], canvas.width, JQuery('#' + base.getLeftUnitName()).val(), false); history.addHistory(store.clone(), 3)" v-bind:disabled="canvas.layout != '3'">
                            <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="basic-props-item position-t">
                <div class="main-text-tran-50">上边距</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_y.svg" />
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getTopValueName()" type="number" class="mas-basis-input mas-input-top" @input="base.setTopValue(currentElementList[0], canvas.height, JQuery('#' + base.getTopValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="line.setElement(currentElementList[0]); history.addHistory(store.clone(), 3)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="base.getTopUnitName()" class="main-mas-basis-select" @change="base.setTopUnit(currentElementList[0], canvas.height, JQuery('#' + base.getTopUnitName()).val(), false); history.addHistory(store.clone(), 3)" v-bind:disabled="canvas.layout != '3'">
                            <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="basic-props-item position-r" v-if="canvas.layout == '3'">
                <div class="main-text-tran-50">右边距</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_y.svg">
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getRightValueName()" type="number" class="mas-basis-input mas-input-top" @input="base.setRightValue(currentElementList[0], canvas.width, JQuery('#' + base.getRightValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="line.setElement(currentElementList[0]); history.addHistory(store.clone(), 3)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="base.getRightUnitName()" class="main-mas-basis-select" @change="base.setRightUnit(currentElementList[0], canvas.width, JQuery('#' + base.getRightUnitName()).val(), false); history.addHistory(store.clone(), 3)" v-bind:disabled="canvas.layout != '3'">
                            <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="basic-props-item position-b" v-if="canvas.layout == '3'">
                <div class="main-text-tran-50">下边距</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_y.svg">
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getBottomValueName()" type="number" class="mas-basis-input mas-input-top" @input="base.setBottomValue(currentElementList[0], canvas.height, JQuery('#' + base.getBottomValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="line.setElement(currentElementList[0]); history.addHistory(store.clone(), 3)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="base.getBottomUnitName()" class="main-mas-basis-select" @change="base.setBottomUnit(currentElementList[0], canvas.height, JQuery('#' + base.getBottomUnitName()).val(), false); history.addHistory(store.clone(), 3)" v-bind:disabled="canvas.layout != '3'">
                            <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="basic-props-item wh">
                <div class="main-text-tran-50">宽</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_w.svg">
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getWidthValueName()" type="number" class="mas-basis-input mas-input-top" @input="base.setWidthValue(currentElementList[0], canvas.width, JQuery('#' + base.getWidthValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="line.setElement(currentElementList[0]); history.addHistory(store.clone(), 5)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="base.getWidthUnitName()" class="main-mas-basis-select" @change="base.setWidthUnit(currentElementList[0], canvas.width, JQuery('#' + base.getWidthUnitName()).val(), false); history.addHistory(store.clone(), 5)" v-bind:disabled="canvas.layout != '3'">
                            <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="basic-props-item wh">
                <div class="main-text-tran-50">高</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_h.svg">
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getHeightValueName()" type="number" class="mas-basis-input mas-input-top" @input="base.setHeightValue(currentElementList[0], canvas.height, JQuery('#' + base.getHeightValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="line.setElement(currentElementList[0]); history.addHistory(store.clone(), 5)" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select :id="base.getHeightUnitName()" class="main-mas-basis-select" @change="base.setHeightUnit(currentElementList[0], canvas.height, JQuery('#' + base.getHeightUnitName()).val(), false); history.addHistory(store.clone(), 5)" v-bind:disabled="canvas.layout != '3'">
                            <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="basic-props-item radio">
                <div class="main-text-tran-50">角度</div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="label-icon">
                        <img src="../../../image/main/position_angle.svg">
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getRotateName()" type="number" class="mas-basis-input mas-input-top" @input="base.setRotate(currentElementList[0], JQuery('#' + base.getRotateName()).val(), false);" @change="history.addHistory(store.clone(), 4);$store.commit('setHistoryValue', { type: 'style.rotate', element: currentElementList[0], id: base.getRotateName() })" />
                    </div>
                </div>
            </div>
        </div>
        <div class="attribute-opacity main-panel-wrap">
            <div class="main-panel-title">
                <span>不透明度</span>
            </div>
            <div class="main-panel-content-wrap">
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="cover-slider">
                        <el-slider class="cover-slider" :show-tooltip="false" :show-input-controls="false" input-size="mini" @change="base.setOpacity(currentElementList[0], $event, true);history.addHistory(store.clone(), 16)" v-model.number="currentElementList[0].style.opacity" :step='1' :min="0" :max="100" />
                    </div>
                    <div class="mas-basic-layout">
                        <input :id="base.getOpacityName()" type="number" :max="100" class="mas-basis-input" @input="base.setOpacity(currentElementList[0], JQuery('#' + base.getOpacityName()).val(), false)" @change="history.addHistory(store.clone(), 16)" />
                    </div>
                </div>
            </div>
        </div>
        <div class="attribute-base-face">
            <div class="main-panel-wrap">
                <div class="main-panel-title">
                    <span>外观</span>
                </div>
                <div class="main-panel-content-wrap">
                    <div class="main-expend-ic-todo">
                        <div class="expend-header">
                            <div class="expend-header-content">
                                <div class="main-panel-title">
                                    <span>背景颜色</span>
                                </div>
                            </div>
                            <div class="expend-header-aside">
                                <div class="main-mas-button-ico" @click="base.setBackgroundColor(currentElementList[0])">
                                    <i class="el-icon-plus"></i>
                                </div>
                            </div>
                        </div>
                        <div class="expend-content">
                            <div class="expend-content-item" v-for="(item, index) in currentElementList[0].style.backgroundImage.color" :key="index">
                                <div class="main-mas-input-simple expend-content-item-c main-long-content-color">
                                    <div class="mas-basic-layout">
                                        <el-color-picker :ref="'bgColorPicker' + index" v-model="currentElementList[0].style.backgroundImage.color[index]" @change="base.setBackgroundImageColor(currentElementList[0], $event, index);history.addHistory(store.clone(), 141);" size="mini" show-alpha></el-color-picker>
                                    </div>
                                    <div class="main-long-content-label" @click="$refs['bgColorPicker' + index][0].showPicker = true">{{ currentElementList[0].style.backgroundImage.color[index] }}</div>
                                </div>
                                <div class="expend-content-item-aside">
                                    <div class="main-mas-button-ico" @click="base.deleteBackgroundColor(currentElementList[0], index)">
                                        <i class="el-icon-minus"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="expend-bottom" v-if="currentElementList[0].style.backgroundImage.color.length > 1">
                            <div class="expend-bottom-item" v-for="(item, index) in backgroundImageAagle" :key="index" :class="{ 'expend-bottom-item-selected': currentElementList[0].style.backgroundImage.angle === item.value }" @click="base.setBackgroundImageAagle(currentElementList[0], item)">{{ item.label }}</div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">边框颜色</div>
                        <div class="main-mas-input-simple main-long-content-color">
                            <div class="mas-basic-layout">
                                <el-color-picker ref="borderColorPicker" v-model="currentElementList[0].style.borderColor" @change="base.setBorderColor(currentElementList[0], $event);history.addHistory(store.clone(), 17);" size="mini" show-alpha></el-color-picker>
                            </div>
                            <div class="main-long-content-label" @click="$refs['borderColorPicker'].showPicker = true">{{ currentElementList[0].style.borderColor }}</div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">边框风格</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <select :id="base.getBorderStyleName()" class="main-mas-basis-select" @change="base.setBorderStyle(currentElementList[0], JQuery('#' + base.getBorderStyleName()).val(), false);history.addHistory(store.clone(), 18);">
                                    <option value="solid">实线</option>
                                    <option value="dashed">虚线</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">边框宽度</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBorderWidthValueName()" type="number" :min="0" class="mas-basis-input mas-basis-input2" @input="base.setBorderWidthValue(currentElementList[0], JQuery('#' + base.getBorderWidthValueName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="history.addHistory(store.clone(), 19);$store.commit('setHistoryValue', { type: 'style.borderWidth', element: currentElementList[0], id: base.getBorderWidthValueName() })" />
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-2">
                        <div class="main-text-tran-50">圆角</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBorderRadiusValueName()" type="number" :min="0" class="mas-basis-input mas-basis-input2" @input="base.setBorderRadiusValue(currentElementList[0], JQuery('#' + base.getBorderRadiusValueName()).val(), false)" @change="history.addHistory(store.clone(), 20);$store.commit('setHistoryValue', { type: 'style.borderRadius.value', element: currentElementList[0], id: base.getBorderRadiusValueName() })" />
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <select :id="base.getBorderRadiusUnitName()" class="main-mas-basis-select" @change="base.setBorderRadiusUnit(currentElementList[0], JQuery('#' + base.getBorderRadiusUnitName()).val(), false); history.addHistory(store.clone(), 20)">
                                    <option :value="item.value" v-for="(item, index) in unitOption" :key="index">{{ item.label }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">对象模糊</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getFilterName()" type="number" :min="0" class="mas-basis-input mas-basis-input2" @input="base.setFilter(currentElementList[0], JQuery('#' + base.getFilterName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="history.addHistory(store.clone(), 19);$store.commit('setHistoryValue', { type: 'style.filter', element: currentElementList[0], id: base.getFilterName() })" />
                            </div>
                        </div>
                    </div>
                    <!-- <div class="base-row-item row-1">
                        <div class="main-text-tran-50">背景模糊</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBackdropFilterName()" type="number" :min="0" class="mas-basis-input mas-basis-input2" @input="base.setBackdropFilter(currentElementList[0], JQuery('#' + base.getBackdropFilterName()).val(), false); register.redraw(system.SYSTEM_EDIT_ELEMENT + currentElementList[0].id, { deltay: 500 });" @change="history.addHistory(store.clone(), 19);$store.commit('setHistoryValue', { type: 'style.backdropFilter', element: currentElementList[0], id: base.getBackdropFilterName() })" />
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="main-panel-wrap">
                <div class="main-panel-title">
                    <span>阴影效果</span>
                </div>
                <div class="main-panel-content-wrap">
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">水平阴影</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBoxShadowLevelName()" type="number" class="mas-basis-input mas-basis-input2" @input="base.setBoxShadowLevel(currentElementList[0], JQuery('#' + base.getBoxShadowLevelName()).val(), false)" @change="history.addHistory(store.clone(), 21)" />
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">垂直阴影</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBoxShadowVerticalName()" type="number" class="mas-basis-input mas-basis-input2" @input="base.setBoxShadowVertical(currentElementList[0], JQuery('#' + base.getBoxShadowVerticalName()).val(), false)" @change="history.addHistory(store.clone(), 22)" />
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">模糊距离</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBoxShadowBlurName()" type="number" class="mas-basis-input mas-basis-input2" @input="base.setBoxShadowBlur(currentElementList[0], JQuery('#' + base.getBoxShadowBlurName()).val(), false)" @change="history.addHistory(store.clone(), 23)" />
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">阴影大小</div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input :id="base.getBoxShadowSpreadName()" type="number" class="mas-basis-input mas-basis-input2" @input="base.setBoxShadowSpread(currentElementList[0], JQuery('#' + base.getBoxShadowSpreadName()).val(), false)" @change="history.addHistory(store.clone(), 24)" />
                            </div>
                        </div>
                    </div>
                    <div class="base-row-item row-1">
                        <div class="main-text-tran-50">阴影颜色</div>
                        <div class="main-mas-input-simple main-long-content-color">
                            <div class="mas-basic-layout">
                                <el-color-picker ref="boxShadowColorPicker" v-model="currentElementList[0].style.boxShadow.color" @change="base.setBoxShadowColor(currentElementList[0], $event);history.addHistory(store.clone(), 25);" size="mini" show-alpha></el-color-picker>
                            </div>
                            <div class="main-long-content-label" @click="$refs['boxShadowColorPicker'].showPicker = true">{{ currentElementList[0].style.boxShadow.color }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import base from '@/js/main/attribute/base.js';
import store from '@/js/store/state.js';
import JQuery from 'jquery';
import history from '@/js/main/history.js';
import editChart from '@/js/element/chart.js';
import line from '@/js/main/line.js';
import system from '@/js/main/system.js';
import register from '@/js/main/register.js';

export default {
    data() {
        return {
            JQuery: JQuery,
            window: window,
            history: history,
            register: register,
            store: store,
            line: line,
            currentElementList: store.getCurrentElementList(),
            canvas: store.getCanvas(),
            base: base,
            system: system,
            unitOption: [
                {
                    label: 'px',
                    value: 'px'
                },
                {
                    label: '%',
                    value: '%'
                }
            ],
            backgroundImageAagle: [
                {
                    label: '水平方向',
                    value: 90
                },
                {
                    label: '垂直方向',
                    value: 0
                },
                {
                    label: '对角方向',
                    value: 45
                }
            ],
            editChart: editChart
        }
    },
    mounted() {
        base.setAttribute(this.currentElementList[0]);
    },
    methods: {
        getValidataBoxLabel(success) {
            let str = '';
            for (let index = 0; index < success.length; index++) {
                let num = success[index];
                if (num === 0) {
                    str += '对象为空 <br/>';
                } else if (num === 1) {
                    str += '缺少横向参数 <br/>';
                } else if (num === 2) {
                    str += '缺少纵向参数 <br/>';
                } else if (num === 3) {
                    str += '宽度小于0 <br/>';
                } else if (num === 4) {
                    str += '高度小于0 <br/>';
                } else {
                    str += '';
                }
            }
            return str;
        },
        show() {}
    }
}
</script>

<style lang="scss" scoped>
.attribute-attr {
    position: relative;
    max-height: $attrMaxHeight;
    .validata-warning {
        color: #ff0000;
    }
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow-y: auto;
    overflow-x: hidden;
}
.mas-input-top {
    position: relative;
    top: -1px;
}
.cover-slider {
    ::v-deep.el-slider__button-wrapper {
        z-index: 1;
    }
}
.attribute-position {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-row-gap: 6px;
    .basic-props-item {
        height: 30px;
        width: 100%;
        display: grid;
        grid-column-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
        &.radio {
            grid-template-columns: 40px 1fr 30px;
        }
        &.position-l,
        &.position-t,
        &.position-r,
        &.position-b,
        &.wh {
            grid-template-columns: 40px 1fr 50px 30px;
        }
    }
}
.attribute-opacity {
    .cover-slider {
        width: 120px;
        margin-left: 10px;
    }
    .main-mas-input-simple {
        margin-right: 36px;
    }
    .cover-slider ::v-deep.el-slider__bar {
        background: linear-gradient(90deg, #acdfe4 0%, #fffefd 100%) !important;
        height: 5px !important;
    }
    .cover-slider ::v-deep.el-slider__runway.show-input {
        margin: 20px 80px 0 5px !important;
        width: calc(100% - 100px) !important;
    }
    .cover-slider ::v-deep.el-slider__runway {
        height: 5px !important;
        border-radius: 20px !important;
    }
    .cover-slider ::v-deep.el-slider__input {
        width: 61.8px !important;
        margin: 8px 2px 0 0 !important;
    }
    .cover-slider ::v-deep.el-slider__bar {
        background: linear-gradient(90deg, #acdfe4 0%, #fffefd 100%) !important;
        height: 5px !important;
    }
    .cover-slider ::v-deep.el-slider__button {
        width: 12px !important;
        height: 12px !important;
        border: solid 1px #91d5ff !important;
    }
    .mas-basic-layout {
        margin-left: 20px;
    }
}
.attribute-base-face {
    .base-row-item {
        height: 30px;
        width: 100%;
        display: grid;
        grid-gap: 6px;
        align-items: center;
        font-weight: 600;
        cursor: auto;
    }
    .row-1 {
        grid-template-columns: 60px 1fr 30px;
    }
    .row-2 {
        grid-template-columns: 60px 1fr 50px 30px;
    }
    .bg-no {
        background: none;
    }
}
</style>